<template>
<view class='uni-icon' :style='style' />
</template>

<script setup lang="ts">
  import { IconProps } from '../props'
  import { useIconfont } from '../useIconfont'
  import { computed } from 'vue'
  const props = defineProps(IconProps)
  const {
  colors,
  svgSize,
  quot,
  isStr,
  } = useIconfont(props)
  const style = computed(() => {
      return `background-image: url(${quot.value}data:image/svg+xml, %3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg' width='${svgSize.value}px' height='${svgSize.value}px'%3E%3Cpath d='M888.107 353.067L742.4 273.493a53.333 53.333 0 0 1-27.733-46.72V192A117.547 117.547 0 0 0 597.333 74.667H192A117.547 117.547 0 0 0 74.667 192v490.667A117.547 117.547 0 0 0 192 800h36.48a117.12 117.12 0 0 0 225.493 0h115.84a117.12 117.12 0 0 0 225.494 0H832a117.547 117.547 0 0 0 117.333-117.333V455.893a117.333 117.333 0 0 0-61.226-102.826zM341.333 821.333A53.333 53.333 0 1 1 394.667 768a53.333 53.333 0 0 1-53.334 53.333z m341.334 0A53.333 53.333 0 0 1 629.333 768a55.467 55.467 0 0 1 53.334-53.333 53.333 53.333 0 0 1 0 106.666z m202.666-138.666A53.333 53.333 0 0 1 832 736h-36.48a117.547 117.547 0 0 0-112.853-85.333A119.253 119.253 0 0 0 570.027 736h-115.84a117.12 117.12 0 0 0-225.494 0H192a53.333 53.333 0 0 1-53.333-53.333V192A53.333 53.333 0 0 1 192 138.667h405.333A53.333 53.333 0 0 1 650.667 192v34.773a117.333 117.333 0 0 0 61.226 103.04L857.6 409.387a53.333 53.333 0 0 1 27.733 46.72z' fill='${(isStr.value ? colors.value : colors.value[0]) || 'rgb(51,51,51)'}' /%3E%3Cpath d='M597.333 394.667h-74.666V277.333a32 32 0 0 0-64 0v149.334a32 32 0 0 0 32 32h106.666a32 32 0 0 0 0-64z' fill='${(isStr.value ? colors.value : colors.value[1]) || 'rgb(51,51,51)'}' /%3E%3C/svg%3E${quot.value}); width: ${svgSize.value}px; height: ${svgSize.value}px;`
  })
</script>
